<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="Content-Script-Type" content="text/javascript" />
	<title>jQselectable : make selectbox so useful</title>
	<link type="text/css" rel="stylesheet" href="css/style.css" />
	<link type="text/css" rel="stylesheet" href="skin/selectable/style.css" />
	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">google.load("jquery", "1.3.2");</script>
	<script type="text/javascript" src="js/jQselectable.js"></script>
	<script type="text/javascript">
	jQuery(function($){
		$(".selectable").jQselectable({
			set: "fadeIn",
			setDuration: "fast",
			opacity: .9
		});
		
		$(".simpleBox").jQselectable({
			style: "simple",
			set: "slideDown",
			out: "fadeOut",
			setDuration: 150,
			outDuration: 150,
			height: 150,
			opacity: .9
		});
		
		$("#callback").jQselectable({
			style: "simple",
			height: 150,
			opacity: .9,
			callback: function(){
				if($(this).val().length>0) window.location = $(this).val();
			}
		});
		
		// change skins but not for IE
		if(document.all){
			$("#skin").remove();
		}else{
			var css = $("link[type='text/css']");
			$("#skin a").click(function(){
				var href = this.href.split("#")[1];
				css[1].href = css[1].href.replace(/(skin\/)\w+(\/style.css)/,"$1"+href+"$2");
				return false;
			});
		}
	});
	</script>
</head>

<body>
<p class="note"><a href="http://jqselectable.googlecode.com/">Project Home</a> | <a href="http://moto-mono.net/">5509</a></p>
<div class="pagebody">
	<h1>jQselectable</h1>
	<p id="skin">change styles：<a href="#selectable">selectable</a> | <a href="#natural">natural</a></p>
	<h2>Default selectbox</h2>
	<dl id="noapply">
	    <dt><label for="pref_noapply">1) Default selectbox</label></dt>
	    <dd>
	    	<select id="pref_noapply" name="pref_noapply" class="">
	    		<optgroup label="北海道">
	    			<option value="01">北海道</option>
	    		</optgroup>
	    		<optgroup label="東北">
	    			<option value="02">青森県</option>
	    			<option value="03">岩手県</option>	
	    			<option value="04">宮城県</option>
	    			<option value="05">秋田県</option>
	    			<option value="06">山形県</option>
	    			<option value="07">福島県</option>
	    		</optgroup>
	    		<optgroup label="関東">
	    			<option value="08">東京都</option>
	    			<option value="09">茨城県</option>
	    			<option value="10">栃木県</option>
	    			<option value="11">群馬県</option>
	    			<option value="12">埼玉県</option>
	    			<option value="13">千葉県</option>
	    			<option value="14">神奈川県</option>
	    		</optgroup>
	    		<optgroup label="北陸">
	    			<option value="15">富山県</option>
	    			<option value="16">石川県</option>
	    			<option value="17">福井県</option>
	    		</optgroup>
	    		<optgroup label="甲信越">
	    			<option value="18">新潟県</option>
	    			<option value="19">山梨県</option>
	    			<option value="20">長野県</option>
	    		</optgroup>
	    		<optgroup label="東海">
	    			<option value="21">岐阜県</option>
	    			<option value="22">静岡県</option>
	    			<option value="23">愛知県</option>
	    			<option value="24">三重県</option>
	    		</optgroup>
	    		<optgroup label="関西">
	    			<option value="25">滋賀県</option>
	    			<option value="26">京都府</option>
	    			<option value="27">大阪府</option>
	    			<option value="28">兵庫県</option>
	    			<option value="29">奈良県</option>
	    			<option value="30">和歌山県</option>
	    		</optgroup>
	    		<optgroup label="中四国">
	    			<option value="31">鳥取県</option>
	    			<option value="32">島根県</option>
	    			<option value="33">岡山県</option>
	    			<option value="34">広島県</option>
	    			<option value="35">山口県</option>
	    			<option value="36">徳島県</option>
	    			<option value="37">香川県</option>
	    			<option value="38">愛媛県</option>
	    			<option value="39">高知県</option>
	    		</optgroup>
	    		<optgroup label="九州">
	    			<option value="40">福岡県</option>
	    			<option value="41">佐賀県</option>
	    			<option value="42">長崎県</option>
	    			<option value="43">熊本県</option>
	    			<option value="44">大分県</option>
	    			<option value="45">宮崎県</option>
	    			<option value="46">鹿児島県</option>
	    		</optgroup>
	    		<optgroup label="沖縄">
	    			<option value="47">沖縄県</option>
	    		</optgroup>
	    	</select>
	    </dd>
	</dl>
	
	<h2>jQselectable</h2>
	<dl id="selectable">
	    <dt><label for="pref">2) Prefectures with optgroup not using selected, <strong>selectable</strong></label></dt>
	    <dd>
	    	<select id="pref" name="pref" class="selectable">
	    		<optgroup label="北海道">
	    			<option value="01">北海道</option>
	    		</optgroup>
	    		<optgroup label="東北">
	    			<option value="02">青森県</option>
	    			<option value="03">岩手県</option>	
	    			<option value="04">宮城県</option>
	    			<option value="05">秋田県</option>
	    			<option value="06">山形県</option>
	    			<option value="07">福島県</option>
	    		</optgroup>
	    		<optgroup label="関東">
	    			<option value="08">東京都</option>
	    			<option value="09">茨城県</option>
	    			<option value="10">栃木県</option>
	    			<option value="11">群馬県</option>
	    			<option value="12">埼玉県</option>
	    			<option value="13">千葉県</option>
	    			<option value="14">神奈川県</option>
	    		</optgroup>
	    		<optgroup label="北陸">
	    			<option value="15">富山県</option>
	    			<option value="16">石川県</option>
	    			<option value="17">福井県</option>
	    		</optgroup>
	    		<optgroup label="甲信越">
	    			<option value="18">新潟県</option>
	    			<option value="19">山梨県</option>
	    			<option value="20">長野県</option>
	    		</optgroup>
	    		<optgroup label="東海">
	    			<option value="21">岐阜県</option>
	    			<option value="22">静岡県</option>
	    			<option value="23">愛知県</option>
	    			<option value="24">三重県</option>
	    		</optgroup>
	    		<optgroup label="関西">
	    			<option value="25">滋賀県</option>
	    			<option value="26">京都府</option>
	    			<option value="27">大阪府</option>
	    			<option value="28">兵庫県</option>
	    			<option value="29">奈良県</option>
	    			<option value="30">和歌山県</option>
	    		</optgroup>
	    		<optgroup label="中四国">
	    			<option value="31">鳥取県</option>
	    			<option value="32">島根県</option>
	    			<option value="33">岡山県</option>
	    			<option value="34">広島県</option>
	    			<option value="35">山口県</option>
	    			<option value="36">徳島県</option>
	    			<option value="37">香川県</option>
	    			<option value="38">愛媛県</option>
	    			<option value="39">高知県</option>
	    		</optgroup>
	    		<optgroup label="九州">
	    			<option value="40">福岡県</option>
	    			<option value="41">佐賀県</option>
	    			<option value="42">長崎県</option>
	    			<option value="43">熊本県</option>
	    			<option value="44">大分県</option>
	    			<option value="45">宮崎県</option>
	    			<option value="46">鹿児島県</option>
	    		</optgroup>
	    		<optgroup label="沖縄">
	    			<option value="47">沖縄県</option>
	    		</optgroup>
	    	</select>
	    </dd>
	    <dt><label for="pref2">3) Prefectures with optgroup using selected, <strong>selectable</strong></label></dt>
	    <dd>
	    	<select id="pref2" name="pref2" class="selectable">
	    		<optgroup label="北海道">
	    			<option value="01">北海道</option>
	    		</optgroup>
	    		<optgroup label="東北">
	    			<option value="02">青森県</option>
	    			<option value="03">岩手県</option>	
	    			<option value="04">宮城県</option>
	    			<option value="05">秋田県</option>
	    			<option value="06">山形県</option>
	    			<option value="07">福島県</option>
	    		</optgroup>
	    		<optgroup label="関東">
	    			<option value="08">東京都</option>
	    			<option value="09">茨城県</option>
	    			<option value="10">栃木県</option>
	    			<option value="11">群馬県</option>
	    			<option value="12">埼玉県</option>
	    			<option value="13">千葉県</option>
	    			<option value="14">神奈川県</option>
	    		</optgroup>
	    		<optgroup label="北陸">
	    			<option value="15">富山県</option>
	    			<option value="16">石川県</option>
	    			<option value="17">福井県</option>
	    		</optgroup>
	    		<optgroup label="甲信越">
	    			<option value="18">新潟県</option>
	    			<option value="19">山梨県</option>
	    			<option value="20">長野県</option>
	    		</optgroup>
	    		<optgroup label="東海">
	    			<option value="21">岐阜県</option>
	    			<option value="22">静岡県</option>
	    			<option value="23">愛知県</option>
	    			<option value="24">三重県</option>
	    		</optgroup>
	    		<optgroup label="関西">
	    			<option value="25">滋賀県</option>
	    			<option value="26">京都府</option>
	    			<option value="27" selected="selected">大阪府</option>
	    			<option value="28">兵庫県</option>
	    			<option value="29">奈良県</option>
	    			<option value="30">和歌山県</option>
	    		</optgroup>
	    		<optgroup label="中四国">
	    			<option value="31">鳥取県</option>
	    			<option value="32">島根県</option>
	    			<option value="33">岡山県</option>
	    			<option value="34">広島県</option>
	    			<option value="35">山口県</option>
	    			<option value="36">徳島県</option>
	    			<option value="37">香川県</option>
	    			<option value="38">愛媛県</option>
	    			<option value="39">高知県</option>
	    		</optgroup>
	    		<optgroup label="九州">
	    			<option value="40">福岡県</option>
	    			<option value="41">佐賀県</option>
	    			<option value="42">長崎県</option>
	    			<option value="43">熊本県</option>
	    			<option value="44">大分県</option>
	    			<option value="45">宮崎県</option>
	    			<option value="46">鹿児島県</option>
	    		</optgroup>
	    		<optgroup label="沖縄">
	    			<option value="47">沖縄県</option>
	    		</optgroup>
	    	</select>
	    </dd>
	    <dt><label for="pref_noopt">4) Prefectures without optgrout using br class, <strong>selectable</strong></label></dt>
	    <dd>
	    	<select id="pref_noopt" name="pref_noopt" class="selectable">
	    		<option value="01" class="br">北海道</option>
	    		<option value="02">青森県</option>
	    		<option value="03">岩手県</option>	
	    		<option value="04">宮城県</option>
	    		<option value="05">秋田県</option>
	    		<option value="06">山形県</option>
	    		<option value="07" class="br">福島県</option>
	    		<option value="08">東京都</option>
	    		<option value="09">茨城県</option>
	    		<option value="10">栃木県</option>
	    		<option value="11">群馬県</option>
	    		<option value="12">埼玉県</option>
	    		<option value="13">千葉県</option>
	    		<option value="14" class="br">神奈川県</option>
	    		<option value="15">富山県</option>
	    		<option value="16">石川県</option>
	    		<option value="17" class="br">福井県</option>
	    		<option value="18">新潟県</option>
	    		<option value="19">山梨県</option>
	    		<option value="20" class="br">長野県</option>
	    		<option value="21">岐阜県</option>
	    		<option value="22">静岡県</option>
	    		<option value="23">愛知県</option>
	    		<option value="24" class="br">三重県</option>
	    		<option value="25">滋賀県</option>
	    		<option value="26">京都府</option>
	    		<option value="27">大阪府</option>
	    		<option value="28">兵庫県</option>
	    		<option value="29">奈良県</option>
	    		<option value="30" class="br">和歌山県</option>
	    		<option value="31">鳥取県</option>
	    		<option value="32">島根県</option>
	    		<option value="33">岡山県</option>
	    		<option value="34">広島県</option>
	    		<option value="35">山口県</option>
	    		<option value="36">徳島県</option>
	    		<option value="37">香川県</option>
	    		<option value="38">愛媛県</option>
	    		<option value="39" class="br">高知県</option>
	    		<option value="40">福岡県</option>
	    		<option value="41">佐賀県</option>
	    		<option value="42">長崎県</option>
	    		<option value="43">熊本県</option>
	    		<option value="44">大分県</option>
	    		<option value="45">宮崎県</option>
	    		<option value="46">鹿児島県</option>
	    		<option value="47">沖縄県</option>
	    	</select>
	    </dd>
	    <dt>5) Days using br class, <strong>selectable</strong></dt>
	    <dd>
	    	<select name="date_year" id="date_year" class="selectable m_year">
	    		<option value="1980">1980</option>
	    		<option value="1981">1981</option>
	    		<option value="1982">1982</option>
	    		<option value="1983">1983</option>
	    		<option value="1984">1984</option>
	    		<option value="1985">1985</option>
	    		<option value="1986">1986</option>
	    		<option value="1987">1987</option>
	    		<option value="1988">1988</option>
	    		<option value="1989" class="br">1989</option>
	    		<option value="1990">1990</option>
	    		<option value="1991">1991</option>
	    		<option value="1992">1992</option>
	    		<option value="1993">1993</option>
	    		<option value="1994">1994</option>
	    		<option value="1995">1995</option>
	    		<option value="1996">1996</option>
	    		<option value="1997">1997</option>
	    		<option value="1998">1998</option>
	    		<option value="1999" class="br">1999</option>
	    		<option value="2000">2000</option>
	    		<option value="2001">2001</option>
	    		<option value="2002">2002</option>
	    		<option value="2003">2003</option>
	    		<option value="2004">2004</option>
	    		<option value="2005">2005</option>
	    		<option value="2006">2006</option>
	    		<option value="2007">2007</option>
	    		<option value="2008" selected="selected">2008</option>
	    		<option value="2009">2009</option>
	    	</select> 年
	    	<select name="date_month" id="date_month" class="selectable m_month">
	    		<option value="1">1</option>
	    		<option value="2">2</option>
	    		<option value="3">3</option>
	    		<option value="4">4</option>
	    		<option value="5">5</option>
	    		<option value="6">6</option>
	    		<option value="7">7</option>
	    		<option value="8">8</option>
	    		<option value="9">9</option>
	    		<option value="10">10</option>
	    		<option value="11">11</option>
	    		<option value="12">12</option>
	    	</select> 月
	    	<select name="date_day" id="date_day" class="selectable m_day">
	    		<option value="1">1</option>
	    		<option value="2">2</option>
	    		<option value="3">3</option>
	    		<option value="4">4</option>
	    		<option value="5">5</option>
	    		<option value="6">6</option>
	    		<option value="7" class="br">7</option>
	    		<option value="8">8</option>
	    		<option value="9">9</option>
	    		<option value="10">10</option>
	    		<option value="11">11</option>
	    		<option value="12">12</option>
	    		<option value="13">13</option>
	    		<option value="14" class="br">14</option>
	    		<option value="15">15</option>
	    		<option value="16">16</option>
	    		<option value="17">17</option>
	    		<option value="18">18</option>
	    		<option value="19">19</option>
	    		<option value="20">20</option>
	    		<option value="21" class="br">21</option>
	    		<option value="22">22</option>
	    		<option value="23">23</option>
	    		<option value="24">24</option>
	    		<option value="25">25</option>
	    		<option value="26">26</option>
	    		<option value="27">27</option>
	    		<option value="28" class="br">28</option>
	    		<option value="29">29</option>
	    		<option value="30">30</option>
	    		<option value="31">31</option>
	    	</select> 日	
	    </dd>
	</dl>
	
	<h2>Simplebox</h2>
	<dl id="simpleBox">
	    <dt><label for="pref_noopt2">6) Prefectures without optgroup, <strong>simpleBox</strong></label></dt>
	    <dd>
	    	<select id="pref_noopt2" name="pref_noopt2" class="simpleBox">
	    		<option value="01">北海道</option>
	    		<option value="02">青森県</option>
	    		<option value="03">岩手県</option>	
	    		<option value="04">宮城県</option>
	    		<option value="05">秋田県</option>
	    		<option value="06">山形県</option>
	    		<option value="07">福島県</option>
	    		<option value="08">東京都</option>
	    		<option value="09">茨城県</option>
	    		<option value="10">栃木県</option>
	    		<option value="11">群馬県</option>
	    		<option value="12">埼玉県</option>
	    		<option value="13">千葉県</option>
	    		<option value="14">神奈川県</option>
	    		<option value="15">富山県</option>
	    		<option value="16">石川県</option>
	    		<option value="17">福井県</option>
	    		<option value="18">新潟県</option>
	    		<option value="19">山梨県</option>
	    		<option value="20">長野県</option>
	    		<option value="21">岐阜県</option>
	    		<option value="22">静岡県</option>
	    		<option value="23">愛知県</option>
	    		<option value="24">三重県</option>
	    		<option value="25">滋賀県</option>
	    		<option value="26">京都府</option>
	    		<option value="27">大阪府</option>
	    		<option value="28">兵庫県</option>
	    		<option value="29">奈良県</option>
	    		<option value="30">和歌山県</option>
	    		<option value="31">鳥取県</option>
	    		<option value="32">島根県</option>
	    		<option value="33">岡山県</option>
	    		<option value="34">広島県</option>
	    		<option value="35">山口県</option>
	    		<option value="36">徳島県</option>
	    		<option value="37">香川県</option>
	    		<option value="38">愛媛県</option>
	    		<option value="39">高知県</option>
	    		<option value="40">福岡県</option>
	    		<option value="41">佐賀県</option>
	    		<option value="42">長崎県</option>
	    		<option value="43">熊本県</option>
	    		<option value="44">大分県</option>
	    		<option value="45">宮崎県</option>
	    		<option value="46">鹿児島県</option>
	    		<option value="47">沖縄県</option>
	    	</select>
	    </dd>
	    <dt>7) Days, <strong>simpleBox</strong></dt>
	    <dd>
	    	<select name="date_year2" id="date_year2" class="simpleBox s_year">
	    		<option value="1980">1980</option>
	    		<option value="1981">1981</option>
	    		<option value="1982">1982</option>
	    		<option value="1983">1983</option>
	    		<option value="1984">1984</option>
	    		<option value="1985">1985</option>
	    		<option value="1986">1986</option>
	    		<option value="1987">1987</option>
	    		<option value="1988">1988</option>
	    		<option value="1989">1989</option>
	    		<option value="1990">1990</option>
	    		<option value="1991">1991</option>
	    		<option value="1992">1992</option>
	    		<option value="1993">1993</option>
	    		<option value="1994">1994</option>
	    		<option value="1995">1995</option>
	    		<option value="1996">1996</option>
	    		<option value="1997">1997</option>
	    		<option value="1998">1998</option>
	    		<option value="1999">1999</option>
	    		<option value="2000">2000</option>
	    		<option value="2001">2001</option>
	    		<option value="2002">2002</option>
	    		<option value="2003">2003</option>
	    		<option value="2004">2004</option>
	    		<option value="2005">2005</option>
	    		<option value="2006">2006</option>
	    		<option value="2007">2007</option>
	    		<option value="2008">2008</option>
	    		<option value="2009">2009</option>
	    	</select> /
	    	<select name="date_month2" id="date_month2" class="simpleBox s_month">
	    		<option value="1">1</option>
	    		<option value="2">2</option>
	    		<option value="3">3</option>
	    		<option value="4">4</option>
	    		<option value="5">5</option>
	    		<option value="6">6</option>
	    		<option value="7">7</option>
	    		<option value="8">8</option>
	    		<option value="9">9</option>
	    		<option value="10">10</option>
	    		<option value="11">11</option>
	    		<option value="12">12</option>
	    	</select> /
	    	<select name="date_day2" id="date_day2" class="simpleBox s_day">
	    		<option value="1">1</option>
	    		<option value="2">2</option>
	    		<option value="3">3</option>
	    		<option value="4">4</option>
	    		<option value="5">5</option>
	    		<option value="6">6</option>
	    		<option value="7">7</option>
	    		<option value="8">8</option>
	    		<option value="9">9</option>
	    		<option value="10">10</option>
	    		<option value="11">11</option>
	    		<option value="12">12</option>
	    		<option value="13">13</option>
	    		<option value="14">14</option>
	    		<option value="15">15</option>
	    		<option value="16">16</option>
	    		<option value="17">17</option>
	    		<option value="18">18</option>
	    		<option value="19">19</option>
	    		<option value="20">20</option>
	    		<option value="21">21</option>
	    		<option value="22">22</option>
	    		<option value="23">23</option>
	    		<option value="24">24</option>
	    		<option value="25">25</option>
	    		<option value="26">26</option>
	    		<option value="27">27</option>
	    		<option value="28">28</option>
	    		<option value="29">29</option>
	    		<option value="30">30</option>
	    		<option value="31">31</option>
	    	</select> 
	    </dd>
	</dl>
	
	<h2>Using Callback</h2>
	<dl id="callbacks">
	    <dt><label for="callback">8) Selector, <strong>Callback</strong></label></dt>
	    <dd>
	    	<select id="callback" name="callback" class="callback">
	    		<option value="">select me</option>
	    		<option value="http://moto-mono.net/">moto-mono</option>
	    		<option value="http://www.google.co.jp/">Goolge</option>
	    		<option value="http://mail.google.com/">Gmail</option>
	    		<option value="http://www.google.com/imghp?hl=ja">Google 画像検索</option>
	    		<option value="http://www.yahoo.co.jp/">Yahoo</option>
	    		<option value="http://www.livedoor.com/">Livedoor</option>
	    	</select>
	    </dd>
	</dl>
	
	<p class="copy">Copyright 2008-2010 <a href="http://moto-mono.net">5509</a> Some Rights Reserved.</p>
</div>

</body>
</html>
